<extend name="Public:innerbase" />
<block name="css">
<style>
	.table-toolbar{
		margin:10px 0;
	}
	.form-control-inline{
		display:inline-block;
		width:auto;
	}
	.item-image-list{
		list-style:none;
		padding:0;
		overflow:none;
		margin:20px 0;
	}
	.item-image-list li{
		width:150px;
		float:left;
	}
	.item-image-list li img{
		max-width:100%;
	}
</style>
<style class="text/css">
.tab-content{
	padding: 20px 10px 0;
}
.award-img{
	width:80px;height:80px;
}

.item-img-wrapper{position:relative;display: inline-block;margin-right:10px;}
.img-remove{position:absolute;right:0;top:0;width:30px;height:30px;color:rgb(155, 155, 155);cursor:pointer;background:url(/Public/Common/images/triangle-close.png) center no-repeat}
.img-remove:hover{color:red;}
</style>
</block>
<block name="content">
<div class="page-topbar">
	<ol class="breadcrumb">
	  <li><a href="/User/Index/home.html">控制台</a></li>
	  <li><a href="/User/mall/item.html">商品管理</a></li>
	  <li class="active">添加商品</li>
	</ol>
</div>
<div class="container-fluid">
	<notempty name="set"><code><?php echo wurl('Shop/Item/index?token='.session('token').'&id='.$set['id']);?></code></notempty>
	<div role="tabpanel">
	  <!-- Nav tabs -->
		<ul class="nav nav-tabs" role="tablist">
			<li role="presentation" class="active"><a href="#base" aria-controls="base" role="tab" data-toggle="tab">基本信息</a></li>
			<li role="presentation"><a href="#photo" aria-controls="photo" role="tab" data-toggle="tab">商品图片</a></li>
		</ul>
		<!-- Tab panes -->
		<form action="" method="post" class="form-horizontal" data-toggle="validate">
		<div class="tab-content">
				<div role="tabpanel" class="tab-pane active" id="base">
					<div class="form-group">
						<label class="control-label col-sm-2">所属分类</label>
						<div class="col-sm-4">
							<input type="hidden" name="cate_id" readonly value="{$cate.id}" />
							<p class="form-control-static">{$cate.name}</p>
						</div>
					</div>
					<div class="form-group">
						<label for="title" class="control-label col-sm-2">商品名称</label>
						<div class="col-sm-4">
							<input type="text" id="title" name="title" class="form-control validate[required]" value="{$set.title}" />
						</div>
					</div>
					<div class="form-group">
						<label for="display_limit" class="control-label col-sm-2">商品简介</label>
						<div class="col-sm-4">
							<textarea name="intro" class="form-control">{$set.intro}</textarea>
							<span class="help-block">简要描述商品属性</span>
						</div>
					</div>
					<div class="form-group">
						<label for="display_limit" class="control-label col-sm-2">商品主图片</label>
						<div class="col-sm-4">
							<div class="upload-image-wrapper" data-toggle="spark-upload-image" data-option='{"name":"img","src":"<?php echo $set['img'];?>"}'></div>
						</div>
					</div>
					
					<div class="form-group">
						<label for="price" class="control-label col-sm-2">原价</label>
						<div class="col-sm-4">
							<input type="text" id="price" name="price" class="form-control validate[required,custom[number]]" value="{$set.price}" />
						</div>
					</div>
					<div class="form-group">
						<label for="oprice" class="control-label col-sm-2">优惠价</label>
						<div class="col-sm-4">
							<input type="text" id="oprice" name="oprice" class="form-control validate[required,custom[number]]" value="{$set.oprice}" />
						</div>
					</div>
					<div class="form-group">
						<label for="goods_stock" class="control-label col-sm-2">库存</label>
						<div class="col-sm-4">
							<input type="text" id="goods_stock" name="goods_stock" class="form-control validate[required,custom[integer]]" value="{$set.goods_stock}" />
						</div>
					</div>
					<div class="form-group">
						<label for="buy_num" class="control-label col-sm-2">已售出</label>
						<div class="col-sm-4">
							<input type="text" id="buy_num" name="buy_num" class="form-control validate[required,custom[integer]]" value="{$set.buy_num|default=0}" />
						</div>
					</div>
					<div class="form-group">
						<label for="ordid" class="control-label col-sm-2">排序</label>
						<div class="col-sm-4">
							<input type="text" id="ordid" name="ordid" class="form-control validate[required,custom[integer]]" value="{$set.ordid|default=1}" />
							<div class="help-block">默认为 1,越大排序越靠前</div>
						</div>
					</div>
					<notempty name="spec">
					<div class="form-group">
						<label class="control-label col-sm-2">SKU</label>
						<div class="col-sm-6">
							<table class="table wm-table-bordered table-bordered">
								<thead>
									<tr>
									<th>{$spec.name}</th>
									<th width="120">价格</th>
									<th width="120">库存</th>
									<th width="100" style="text-align:center;"><span class="sku_list_add btn btn-success btn-xs"><i class="fa fa-plus"></i>&nbsp;</span></th>
									</tr>
								</thead>
								<tbody id="skuList">
									<empty name="spec_list">
									<if condition="$set eq ''">
									<tr>
										<td><input type="text" name="sku_name[]" class="form-control form-control-inline input-sm"/></td>
										<td><input type="text" name="sku_price[]" class="form-control form-control-inline input-sm"/></td>
										<td><input type="text" name="sku_stock[]" class="form-control form-control-inline input-sm"/></td>
										<td style="text-align:center;"><span class="btn-remove btn btn-danger btn-xs"><i class="fa fa-trash"></i>&nbsp;</span></td>
									</tr>
									</if>
									<else/>
									<volist name="spec_list" id="vo">
									<tr>
										<td><input type="text" name="sku_name[]" class="form-control form-control-inline input-sm" value="{$vo->name}"/></td>
										<td><input type="text" name="sku_price[]" class="form-control form-control-inline input-sm" value="{$vo->price}"/></td>
										<td><input type="text" name="sku_stock[]" class="form-control form-control-inline input-sm" value="{$vo->stock}"/></td>
										<td style="text-align:center;"><span class="btn-remove btn btn-danger btn-xs"><i class="fa fa-trash"></i>&nbsp;</span></td>
									</tr>
									</volist>
									</empty>
								</tbody>
							</table>
						</div>
					</div>
					</notempty>
					<div class="form-group">
						<label for="UEContent" class="col-sm-2 control-label">图文详情</label>
						<div class="col-sm-8">
							<textarea id="UEContent" style="height:420px;" name="info">{$set['info']}</textarea>
						</div>
					</div>
					<div class="form-group">
						<div class="col-sm-4 col-sm-offset-2">
							<div class="checkbox">
								<label>
									<input name="status" value="1" <if condition="$set['status'] OR $set==null">checked</if> type="checkbox">上架
								</label>
							</div>
						</div>
					</div>
					<div class="form-group">
						<div class="col-sm-offset-2 col-sm-10">
						  <button type="submit" class="btn btn-success">保存</button>
						</div>
					</div>
				</div>
				<div role="tabpanel" class="tab-pane" id="photo" style="padding-top:20px;">
					<span class="btn btn-primary btn-sm btn-upload" id="addImage">上传图片
						<input type="file" name="file" class="upload-file" />
					</span>
					<ul class="item-image-list">
					<volist name="album" id="vo">
						<li><div class="item-img-wrapper"><img src="{$vo}" class="item-img" /><input type="hidden" name="item_image[]" value="{$vo}" /><span class="img-remove">&nbsp;</span></div></li>
					</volist>
					</ul>
				</div>
		</div>
		</form>
	</div>
</div>
</block>
<block name="js">
<script type="text/javascript" charset="utf-8" src="{:STATICS}/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="{:STATICS}/ueditor/ueditor.all.min.js"> </script>
<script type="text/javascript" charset="utf-8" src="{:STATICS}/ueditor/lang/zh-cn/zh-cn.js"> </script>
<script src="/Public/Common/js/upload.js"></script>
<script>
	var TPL = '<li><div class="item-img-wrapper"><img src="%s" class="item-img" /><input type="hidden" name="item_image[]" value="%s" /><span class="img-remove">&nbsp;</span></div></li>';
	var SKU_ITEM_TPL = '<tr><td><input type="text" name="sku_name[]" class="form-control form-control-inline input-sm"/></td><td><input type="text" name="sku_price[]" class="form-control form-control-inline input-sm"/></td><td><input type="text" name="sku_stock[]" class="form-control form-control-inline input-sm"/></td><td style="text-align:center;"><span class="btn btn-danger btn-xs btn-remove"><i class="fa fa-trash"></i>&nbsp;</span></td></tr>';
	$('form').ajaxForm({
		beforeSubmit:function(){
			var check = $('form').validationEngine('validate');
			if(check==true){
				spark.showIndicator();
			}
			return check;
		},
		success:function(res){
			if(res.errcode == 0){
				notify(res.errmsg);
				location.href="{:U('item')}";
			}
			else notify(res.errmsg,'error');
			spark.hideIndicator();
		}
	});
	
	$("#addImage>.upload-file").AjaxFileUpload({
		action: "{:U('Qiniu/upload')}",
		onComplete: function(filename, resp) {
			if(resp.error !=0){
				alert(resp.message);
			}
			else{
				var wrapper = $(sprintf(TPL,resp.url,resp.url));
				wrapper.appendTo('.item-image-list');
				wrapper.find('.img-remove').click(function(){
					$(this).parent().remove();
				});
			}
		}
	});
	$(function(){
		var ue = UE.getEditor('UEContent');
		$('.item-image-list .img-remove').click(function(){
			$(this).parent().remove();
		});
		$('#skuList .btn-remove').click(function(){
			$(this).parents('tr').remove();
		});
		$('.sku_list_add').click(function(){
			var tr = $(SKU_ITEM_TPL);
			tr.find('.btn-remove').click(function(){
				$(this).parents('tr').remove();
			});
			$('#skuList').append(tr);
		});
	})
</script>
</block>